<template>
    <div class="shape-list" ref="shapeList">
        <!--    <i class="iconfont icon-h-drag"/>-->
        <!--    菜单-->
        <!--    <div class="title">节点</div>-->
        <div class="icon-tool flex-l">
            <!--      <i class="iconfont icon-arrow-right"/>-->
            <!--      <i-->
            <!--        draggable="true"-->
            <!--        data-type="node"-->
            <!--        data-shape="circle"-->
            <!--        class="iconfont icon-yuanquan"-->
            <!--      />-->
            <!--      <i-->
            <!--        draggable="true"-->
            <!--        data-type="node"-->
            <!--        data-shape="diamond"-->
            <!--        class="iconfont icon-tubiao"-->
            <!--      />-->
            <!--      <i-->
            <!--        draggable="true"-->
            <!--        data-type="node"-->
            <!--        data-shape="rect"-->
            <!--        class="iconfont icon-btn_drawrec"-->
            <!--      />-->
            <div class="mb20 text-c dark">
                <img
                    data-shape="flow-node"
                    draggable="true"
                    data-type="node"
                    class="iconfont"
                    :src="require('../../assets/img/flow-icon.jpg')"
                />
                <span>流程节点</span>
            </div>
            <div class="mb20 text-c dark">
                <img
                    data-shape="send-node"
                    draggable="true"
                    data-type="node"
                    class="iconfont"
                    :src="require('../../assets/img/send-icon.jpg')"
                />
                <span>抄送节点</span>
            </div>
            <!--      <i-->
            <!--        draggable="true"-->
            <!--        data-type="node"-->
            <!--        data-shape="rect-node-endpoint"-->
            <!--        class="iconfont icon-btn_drawrec"-->
            <!--      />-->
            <!--      <i-->
            <!--        draggable="true"-->
            <!--        data-type="node"-->
            <!--        data-shape="rect-node"-->
            <!--        class="iconfont icon&#45;&#45;changfangxing-sel"-->
            <!--      />-->
            <!--      <i-->
            <!--        draggable="true"-->
            <!--        data-type="node"-->
            <!--        data-shape="diamond-node"-->
            <!--        class="iconfont icon-lingxing1"-->
            <!--      />-->
            <!--      <div id="triangle-up"></div>-->
        </div>
    </div>
</template>

<script>
export default {
    name: 'ShapeLists',
    mounted () {
        const icons = [
            ...this.$refs.shapeList
                .querySelector('.icon-tool')
                .querySelectorAll('.iconfont')
        ]

        icons.forEach(icon => {
            // 拖拽结束
            // icon.addEventListener('click', e => {
            //   this.$emit(`canvas-add-${e.target.dataset.type}`, e)
            // })
            icon.addEventListener('dragend', e => {
                this.$emit(`canvas-add-${e.target.dataset.type}`, e)
            })
        })

        // 阻止默认动作
        document.addEventListener(
            'drop',
            e => {
                e.preventDefault()
            },
            false
        )
    }
}
</script>

<style scoped lang="scss">
@import '../../assets/css/base';

.shape-list {
    //border-right: solid 1px #efefef;
    width: 240px;
    height: 45px;

    .title {
        background: $color-gray;
    }

    .iconfont {
        display: flex;
        font-size: 80px;
        color: #2c3e50;
    }

    .dark {
        position: relative;
        //span{
        //  position: absolute;
        //  left: 30px;
        //  top: 7px;
        //}
    }

    img {
        width: 170px * 0.6;
        height: 50px * 0.6;
        margin-right: $m15;
    }

    #triangle-up {
        width: 50px;
        height: 50px;
        background: red;
        transform: rotate(45deg);
        border: solid 1px #ccc;
        //border-left: 50px solid transparent;
        //border-right: 50px solid transparent;
        //border-bottom: 100px solid red;
    }
}
</style>
